<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    User user = (User) session.getAttribute("user");
    System.out.println(user);
%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人信息</title>
    <script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
    <link rel="stylesheet" href="../js/bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <script type="text/javascript" src="../js/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/history.css">
    <link rel="stylesheet" href="../css/collection.css">
    <link rel="stylesheet" href="../css/user_info.css">
    <script type="text/javascript" src="../js/sweetalert.min.js"></script>
</head>
<body>
<!--导航条-->
<%@include file="plugins/navbar.jsp" %>

<div class="container" style="margin-top: 60px;">
    <div class="page-header">
        <h1>个人信息 <small>My information</small></h1>
    </div>

    <div>

        <!-- Nav tabs -->
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active"><a href="#myInfo" aria-controls="myInfo" role="tab"
                                                      data-toggle="tab">个人信息</a></li>
            <li role="presentation" id="alreadyUpload"><a href="#uploaded" aria-controls="uploaded" role="tab" data-toggle="tab">已上传视频</a>
            </li>
            <li role="presentation"><a href="#updatePassword" aria-controls="updatePassword" role="tab"
                                       data-toggle="tab">修改密码</a></li>
        </ul>

        <!-- Tab panes -->
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="myInfo">
                <div style="margin-top: 30px">
                    <div method="post" action="" id="form1">
                        <input type="hidden" name="action" value="update">
                        <div class="input-group" style="margin-left: 5px">
                            <span>头像：</span>
                            <%
                                if (user.getHeadportrait() != null) {
                            %>
                            <img id="img" src="/online_video/img/<%=user.getHeadportrait()%>" class="img-circle"
                                 style="height: 80px;width: 80px;margin-left: 50px">
                            <%
                            } else {
                            %>
                            <img id="img" src="../webImg/225默认头像.png" class="img-circle"
                                 style="height: 80px;width: 80px;margin-left: 50px">
                            <%
                                }
                            %>
                            <input type="file" id="file" onchange="upFile()" name="headportrait"
                                   style="margin-left: 80px">
                            <input type="hidden" name="fakeheadportrait" value="<%=user.getHeadportrait()%>" style="margin-left: 80px">
                        </div>
                        <div class="input-group">
                            <span class="input-group-addon">昵称</span>
                            <input type="text" name="nickname" class="form-control" value="<%=user.getNickname()%>"
                                   aria-describedby="basic-addon1">
                        </div>

                        <div class="input-group">
                            <span class="input-group-addon">用户名</span>
                            <input type="text" class="form-control" value="<%=user.getUsername()%>"
                                   aria-describedby="basic-addon1" readonly/>
                        </div>

                        <div class="input-group">
                            <span class="input-group-addon">电话</span>
                            <input type="text" name="telephone" class="form-control" value="<%=user.getTelephone()%>"
                                   aria-describedby="basic-addon1">
                        </div>

                        <div class="input-group">
                            <span class="input-group-addon">电子邮箱</span>
                            <input type="text" name="email" class="form-control" value="<%=user.getEmail()%>"
                                   aria-describedby="basic-addon1">
                        </div>
                        <button id="updateBtn" class="btn btn-primary" type="submit" style="margin-left: 180px">修改
                        </button>
                    </div>
                </div>

            </div>
            <div role="tabpanel" class="tab-pane" id="uploaded">
                <div class="col-lg-8">
                    <span class="col-lg-2 label label-default">时间</span>
                    <span class="col-lg-8 label label-primary">内容</span>
                    <span class="col-lg-2 label label-success">操作</span>
                </div>

                <div class="col-lg-8">
                    <table class="table table-striped">
                        <tbody id="colltbody">


                        </tbody>
                    </table>
                </div>

            </div>
            <div role="tabpanel" class="tab-pane" id="updatePassword">
                <div class="input-group" style="margin-top: 30px">
                    <span class="input-group-addon">原密码</span>
                    <input type="text" name="beforePwd" class="form-control" id="prePwd" value="" aria-describedby="basic-addon1">
                    <span class="input-group-addon"><img id="isOkusername" alt="" src="" style="height: 20px;width: 20px;display: none"><h6 id="h61" style="position: absolute;margin-left: 70px;margin-top: -20px"></h6></span>
                </div>
                <div class="input-group" style="margin-top: 30px">
                    <span class="input-group-addon">新密码</span>
                    <input type="text" id="inputPassword" name="newPwd" class="form-control" value="" aria-describedby="basic-addon1">
                    <span class="input-group-addon"><img id="isOkpassword" alt="" src="" style="height: 20px;width: 20px;display: none"><h6 id="h62" style="position: absolute;margin-left: 70px;margin-top: -20px"></h6>4-20位字母数字下划线</span>
                </div>
                <div class="input-group" style="margin-top: 30px">
                    <span class="input-group-addon">确认新密码</span>
                    <input type="text" id="inputRePassword" name="confirmNewPwd" class="form-control" value="" aria-describedby="basic-addon1">
                    <span class="input-group-addon"><img id="isReOkpassword" alt="" src="" style="height: 20px;width: 20px;display: none"><h6 id="h63" style="position: absolute;margin-left: 70px;margin-top: -20px"></h6><br/></span>
                </div>
                <button id="updatePwdBtn" class="btn btn-primary" type="submit" style="margin-left: 180px">修改
                </button>
            </div>
        </div>
    </div>

</div>
<script type="text/javascript">
    $(function () {
        $('#updateBtn').on('click',function () {
            nickname = $('input[name = "nickname"]').val();
            if (nickname == "") {
                alert("昵称不能为空");
                return false;
            }

            //电话正则
            var $phoneReg = /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
            telephone = $('input[name = "telephone"]').val();
            if (!$phoneReg.test(telephone)) {
                alert("手机格式有误");
                return false;
            }

            //邮箱正则
            var $emailReg = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
            $email = $('input[name = "email"]').val();
            if ($email != "") {
                if (!$emailReg.test($email)) {
                    alert("邮箱格式有误");
                    return false;
                }
            } else {
                alert("邮箱不能为空");
                return false;
            }

            $.ajax({
                async: true,
                url: './user.do?action=update',
                dataType: 'text',
                data: {"fakeheadportrait":$('input[name = fakeheadportrait]').val(),
                    "nickname":$('input[name = nickname]').val(),
                    "telephone":$('input[name = telephone]').val(),
                    "email":$('input[name = email]').val(),
                },

                success: function (data) {
                    console.log(data)
                    if (data == "成功") {
                        swal({
                            title: '修改',
                            icon: 'success',
                            text: '修改个人信息成功,请重新登入',
                            confirmButtonText: "确定",
                        }).then(function () {
                            location.href = "./login.jsp";
                        })
                    }
                }
            })
        })
    })

</script>
<script>
    function upFile() {
        var file = $('#file')[0].files[0];
        var myForm = new FormData();//必须使用FormData表达上传数据
        myForm.append("file", file);
        $.ajax({
            method: 'POST',
            url: './user.do?action=uploadFile',
            data: myForm,
            processData: false,//禁止类型转换//必须false才会避开jQuery对 formdata 的默认处理
            contentType: false,//必须false才会自动加上正确的Content-Type
            dataType: 'text',
            success: function (data) {
                //data表示从后端传回来的真是文件名
                console.log(data);
                //实时显示
                $('#img').attr('src', '/online_video/img/' + data);
                //将服务器回传的图片真实名称填写到隐藏域中
                $('input[name = fakeheadportrait]').attr("value", data);
            },
            error: function (err) {
                console.log("err" + err);
            }

        })

    }
</script>

<script>
    $(function () {
        $('#alreadyUpload').click(function () {
            $.ajax({
                async: true,
                url: './video.do?action=queryAllVideoByUid',
                success : function (data) {
                    if (data != ""){
                        var jsonObj = JSON.parse(data);
                        for (var i = 0; i < jsonObj.length; i++) {
                            $('#colltbody').append('<tr>\n' +
                                '                                        <td class="col-lg-2 dateDiv">\n' +
                                '                                            <h4>'+ jsonObj[i].date+'</h4>\n' +
                                '                                        </td>\n' +
                                '                                        <td class="col-lg-8">\n' +
                                '                                            <div class="media">\n' +
                                '                                                <div class="media-left">\n' +
                                '                                                    <a href="#">\n' +
                                '                                                        <img class="media-object" data-src="holder.js/64x64" alt="64x64" src="/online_video/img/'+jsonObj[i].img+'"\n' +
                                '                                                             data-holder-rendered="true"\n' +
                                '                                                             style="width: 64px; height: 64px;">\n' +
                                '                                                    </a>\n' +
                                '                                                </div>\n' +
                                '                                                <div class="media-body">\n' +
                                '                                                    <h4 class="media-heading">'+jsonObj[i].viName+'</h4>\n' +
                                '                                                    <div>\n' +
                                '                                                        <h5>观看时长：2</h5>\n' +
                                '                                                        <h5>类型 ：'+jsonObj[i].category+'</h5>\n' +
                                '                                                    </div>\n' +
                                '                                                </div>\n' +
                                '                                            </div>\n' +
                                '                                        </td>\n' +
                                '                                        <td class="col-lg-2">\n' +
                                '                                            <a onclick="delVideo('+jsonObj[i].vid+')" href="#"><img class="delImg" data-src="holder.js/64x64" alt="64x64" src="../webImg/删除.png"></a>\n' +
                                '                                        </td>\n' +
                                '                                    </tr>')
                        }
                    }
                }
            })
        })
    })

    function delVideo(vid) {
        $.ajax({
            async: true,
            url: './video.do?action=delVideoByVid',
            data:{"vid":vid},
            dataType:'text',
            success:function (data) {
                if (data == 1){
                    swal({
                        title: '删除',
                        icon: 'success',
                        text: '删除成功',
                        confirmButtonText: "确定",
                    }).then(function () {
                        window.location.reload();
                    })
                }
            }
        })
    }
</script>

<script type="text/javascript">
    $(function () {
        $("#prePwd").on('change',function () {
            $.ajax({
                async: true,
                method: 'POST',
                url: './user.do?action=checkPrePwd',
                data:{
                    beforePwd:$(':input[name=beforePwd]').val(),
                },
                dataType: 'text',
                success:function (data) {
                    console.log(data)
                    if (data == -1){
                        $('#isOkusername').css('display','')
                        $('#isOkusername').attr('src',"../webImg/default.png")
                        $('#h61').text("原密码不正确")
                    }
                    if (data == 1){
                        $('#isOkusername').attr('src',"../webImg/success.png")
                        $('#h61').text("")
                    }
                },

            })
        })

        $("#inputPassword").on('change',function () {
            var $passwordReg = /[a-zA-Z0-9_]{4,20}/;
            $password = $('input[name = newPwd]').val();
            if ($password != "") {
                if (!$passwordReg.test($password)) {
                    $('#isOkpassword').css('display','')
                    $('#isOkpassword').attr('src',"../webImg/default.png")
                    return false;
                }else {
                    $('#isOkpassword').css('display','')
                    $('#isOkpassword').attr('src',"../webImg/success.png")
                    $('#h62').text(" ")
                }
            } else {
                //为空
                $('#isOkpassword').css('display','none')
                $('#isOkpassword').attr('src',"../webImg/default.png")
                $('#h62').text(" ")
                return false;
            }
        })

        $("#inputRePassword").on('change',function () {
            $password = $('input[name = newPwd]').val();
            $repassword = $('input[name = confirmNewPwd]').val();
            if ($repassword != $password){
                $('#isReOkpassword').css('display','')
                $('#isReOkpassword').attr('src',"../webImg/default.png")
                $('#h63').text("两次输入密码不一致")
                return false;
            }else {
                $('#isReOkpassword').css('display','')
                $('#isReOkpassword').attr('src',"../webImg/success.png")
                $('#h63').text(" ")
            }
        })
    })

    $('#updatePwdBtn').click(function () {
        //2.密码格式
        var $passwordReg = /[a-zA-Z0-9_]{4,20}/;
        $password = $('input[name = "newPwd"]').val();
        if ($password != ""){
            if (!$passwordReg.test($password)){
                alert("密码格式有误");
                return false;
            }
        }else {
            alert("密码不能为空");
            return false;
        }
        //重复密码
        $repassword = $('input[name = "confirmNewPwd"]').val();
        if ($repassword != $password){
            alert("两次输入密码不一致");
            return false;
        }
        if ($('#h61').text() == "原密码不正确"){
            alert("原密码不正确");
            return false;
        }

        $.ajax({
            async:true,
            url:"./user.do?action=updatePwd",
            data:{"password":$('input[name = newPwd]').val()},
            dataType:'text',
            success:function (data) {
                if (data > 0){
                    swal({
                        title: '修改',
                        icon: 'success',
                        text: '修改个人信息成功,请重新登入',
                        confirmButtonText: "确定",
                    }).then(function () {
                        location.href = "./login.jsp";
                    })
                }
            }
        })
    })
</script>

</body>
</html>